<template>
	<view>
		<view style="position: relative;">
			<u-swiper :height="450" :width="1000" :list="list" :interval="3000"></u-swiper>
			<u-icon style="margin-left: 40rpx;margin-top: -380rpx;position: absolute;" name="arrow-left" size="50"
				@click="back"></u-icon>

			<view class="station" style="position: relative;width: 670rpx;left: 40rpx;border-radius: 20rpx;margin-top: -100rpx;background-color: #FFFFFF;padding-bottom: 20rpx;">
				<view
					style="width: 610rpx;height: 100rpx;margin-left: 30rpx;display: flex;flex-direction: row;align-items: center;margin-top: 60rpx;">
					<view
						style="width: 20rpx;height: 20rpx;background-color: #27ae60;border-radius: 10rpx;margin-left: 30rpx;">
					</view>
					<view style="display: flex;flex-direction: column;"
					@click="startStationPick">
						<text
							style="margin-left: 30rpx;font-size: 28rpx;color: #27ae60;font-weight: bold;">{{startStation}}</text>
						<text style="margin-left: 30rpx;font-size: 25rpx;color: #DD524D;font-weight: bold;"
							v-if="existLine">当前位置未开通线路</text>
							
					</view>
					<view style="width: 120rpx;height: 60rpx;background: linear-gradient(270deg, #FF423F, #FF763F);border-radius: 30rpx;color: #FFFFFF;
					display: flex;align-items: center;justify-content: center;margin-left: 28%;"@click="startStationPick">切换地域</view>
					<!-- <image src="../../static/map/change.png" mode="aspectFill" class="row-rotate" :class="{'rotate':isTranslateX}"
						style="width: 57rpx;height: 59rpx;margin-left: 6.5rem;" @click="changeClick"></image> -->
						
				</view> 

				<view
					style="height: 1rpx;background-color: #EAEAEA;margin-left: 80rpx;margin-right: 40rpx;margin-top: 10rpx;">
				</view>

				<!-- <view
					style="width: 610rpx;height: 100rpx;margin-left: 30rpx;display: flex;flex-direction: row;align-items: center;margin-top: 60rpx;border-radius: 50rpx;background-color: #F5F6FA;"
					@click="endStationPick">
					<view
						style="width: 20rpx;height: 20rpx;background-color: #F35A46;border-radius: 10rpx;margin-left: 30rpx;">
					</view>
					<input style="margin-left: 30rpx;width: 400rpx;font-size: 40rpx;" disabled placeholder="输入您的目的地"
						v-model="endStation" />
				</view>

				<view
					style="height: 1rpx;background-color: #EAEAEA;margin-left: 80rpx;margin-right: 40rpx;margin-top: 10rpx;">
				</view>
				<view
					style="margin-top: 30rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 20rpx;">
					<view class="jh_button" @click="query">查询</view>
				</view> -->

				<!-- <view style="margin-top: 50rpx;margin-bottom: 30rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<image src="../../static/map/hotLine.png" style="width: 100rpx;height: 44rpx;margin-left: 30rpx;"></image>
					<text class="jh_ellipsis" style="margin-left: -40rpx;width: 250rpx;font-size: 32rpx;">延平区 去 顺昌县</text><text class="jh_fs_32" style="margin-left: -50rpx;color: #FF7F47;">￥28</text><text class="jh_fs_32" style="margin-left: -40rpx;font-size: 30rpx;">起</text>
					<text style="color: #999999;margin-right: 30rpx;font-size: 32rpx;"> 更多> </text>
				</view> -->
			</view>
			<view style="width: 670rpx;margin-left: 40rpx;margin-top: 20rpx;">
				<!-- 热门推荐 -->
				<view style="font-size: 35rpx;font-weight: bolder;">热门推荐</view>
				<view
					style="border-radius: 20rpx;background-color: #FFFFFF;width: 100%;margin-top: 20rpx;padding-top: 10rpx;">
					<view class="jh_u-f-ajb" style="margin: 40rpx;border-bottom: 1rpx solid #EAEAEA;height: 80rpx;"
						v-for="(item,index) in recommendation" :key="index">
						<view class="jh_ellipsis" style="font-weight: bolder;width: 350rpx;overflow:scroll;text-overflow:initial">{{item.LineName}}</view>
						<view style="color: #DD524D;width: 100rpx;margin-left: 3%;">¥{{item.LinePrice}}起</view>
						<view
							style="width: 120rpx;height: 60rpx;background: linear-gradient(270deg, #FF423F, #FF763F);border-radius: 30rpx;color: #FFFFFF;display: flex;align-items: center;justify-content: center;"
							@click="reserve(item)">
							预定
						</view>
					</view>
				</view>
				<u-empty text="暂无热门推荐" v-if="recommendation.length == 0"></u-empty>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var _self;
	// #ifdef MP-WEIXIN
	import amap from '../../js_sdk/amap-wx.130.js';
	// #endif
	export default {
		data() {
			return {
				list: [{
					image: 'https://zhcxservice.145u.net/Images/ZHCX/chengjikuaiche1.png',
				}, {
					image: 'https://zhcxservice.145u.net/Images/ZHCX/chengjikuaiche2.png',
				}, {
					image: 'https://zhcxservice.145u.net/Images/ZHCX/chengjikuaiche3.png',
				}],
				recommendation: [], //热门推荐数据
				startStation: '请选择上车点',
				endStation: '',
				centerLatitude: '',
				centerLongitude: '',
				currentLatitude: '',
				currentLongitude: '',
				existLine: true,
				amapPlugin: null,
				gaodekey: '5a96bccf3666231d3e8d55ddd31f8120', //高德key,此处的key需要去高德平台申请获取
				address: "", // 已经获取到的位置
			}
		},
		onLoad() {
			_self = this;
			_self.getMyLocation();
			//根据上车点查询线路信息
			//_self.GetMidwayLineByCode('顺昌');
		},
		created() {
			this.amapPlugin = new amap.AMapWX({
				key: this.gaodekey
			});
			this.getLocation();
		},
		methods: {
			getLocation() {
			    const _self = this;
			    this.amapPlugin = new amap.AMapWX({
			        key: this.gaodekey
			    });
			    uni.showLoading({
			        title: '获取信息中'
			    });
			    // 成功获取位置
			    _self.amapPlugin.getRegeo({
			        success: (data) => {
			            console.log(data, '当前定位');
			            
			            // _self.address =`${data[0].regeocodeData.addressComponent.city}-${data[0].regeocodeData.addressComponent.district}`;
			            // console.log(_self.address, '当前位置');
						if (data[0].regeocodeData.formatted_address) {
							_self.startStation =`${data[0].regeocodeData.addressComponent.city}-${data[0].regeocodeData.addressComponent.district}`;
							// _self.startStation = res.address.city + '-' + res.address.district;
							console.log(_self.startStation, '当前位置');
							_self.GetMidwayLineByCode(_self.startStation);
						} else {
							_self.startStation = '南平市-建阳区'
							_self.GetMidwayLineByCode(_self.startStation);
						}
			            // 可根据自己的实际情况修改
			   //          _self.address = `${data[0].regeocodeData.formatted_address}`;
						// console.log(_self.address, '当前位置1');
						// 传出
			            _self.$emit("lodAddress",_self.address)
			            uni.hideLoading();
			        },
			        // 获取位置失败
			        fail: (err) => {
			            uni.showToast({
			                title: "获取位置失败，请重启小程序",
			                icon: "error"
			            })
			        }
			    });
			},
			changeClick:function(){
				if(_self.endStation!=null&&_self.endStation!=''){
					var start = _self.startStation;
					_self.startStation = _self.endStation;
					_self.endStation = start;
					_self.GetMidwayLineByCode(_self.startStation);
				}
				else{
					_self.showToast('目的地不能为空', 'warning');
				}
				
			},
			//---------------------------------------------快捷弹窗---------------------------------------------
			showToast: function(title, type) {
				_self.$refs.uToast.show({
					title: title,
					type: type
				})
			},
			//-------------------------------获取自身位置-------------------------------
			getMyLocation: function() {
				var that = this;
				uni.getLocation({
					//type默认为wgs84返回gps坐标,gcj02返回国测局坐标,可用于uni.openLocation的坐标
					type: 'gcj02',
					geocode: 'true',
					success: function(res) {
						console.log('自身位置', res);
						_self.currentLatitude = res.latitude;
						_self.currentLongitude = res.longitude;
						if (res.address) {
							_self.startStation = res.address.city + '-' + res.address.district;
							_self.GetMidwayLineByCode(res.address.district);
						} else {
							_self.startStation = '南平市-建阳区'
							_self.GetMidwayLineByCode(_self.startStation);
						}
					},
					fail(res) {
						console.log(res);
					}
				});
			},
			back: function() {
				uni.navigateBack();
			},
			//------------------------------------------------------------选择上车点------------------------------------------------------------
			startStationPick: function() {
				uni.navigateTo({
					url: '../stationPicker/express/expressStationPicker?type=' + 'upStation' +
						'&startStation=' + ''
				})
				uni.$on('StartStaionChange', function(data) {
					_self.startStation = data.StationName;
					// _self.centerLatitude = data.StationLocation.split(',')[1],
					// _self.centerLongitude = data.StationLocation.split(',')[0],
					_self.endStation = '';
					//根据上车点查询线路信息
					_self.GetMidwayLineByCode(data.StationName);
					//清除监听，不清除会消耗资源
					uni.$off('StartStaionChange');
				});
			},
			//------------------------------------------------------------选择下车点------------------------------------------------------------
			endStationPick: function() {
				if (_self.startStation == '请选择上车点') {
					_self.showToast('请先选择上车点', 'warning');
					return
				}
				//城际快车
				uni.navigateTo({
					url: '../stationPicker/express/expressStationPicker?type=' + 'endStation' +
						'&startStation=' + _self.startStation
				})
				//监听事件,监听下个页面返回的值
				uni.$on('EndStaionChange', function(data) {
					_self.endStation = data.StationName;
					//清除监听，不清除会消耗资源
					uni.$off('EndStaionChange');
				})
			},
			//------------------------------------------------------------查询------------------------------------------------------------
			query: function() {
				if (_self.endStation == '' || _self.startStation == '请选择上车点') {
					_self.showToast('请先选择上/下车点', 'warning');
				} else {
					var stationInfo = {
						type: '城际快车',
						selectDate: _self.getTodayDate().replace(/-/g, '/'),
						startStation: _self.startStation,
						endStation: _self.endStation,
						currentLatitude: _self.currentLatitude,
						currentLongitude: _self.currentLongitude
					}
					console.log(stationInfo);
					uni.navigateTo({
						url: '../Order/ConfirmOrder?stationInfo=' + decodeURIComponent(JSON.stringify(
							stationInfo))
					})
				}
			},
			//---------------------------------获取当前日期---------------------------------
			getTodayDate(type) {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var timer = '';
				timer = year + '-' + month + '-' + day;
				return timer;
			},
			//--------------------------------------------根据上车点查询线路信息--------------------------------------------
			GetMidwayLineByCode: function(startStation) {
				uni.showLoading();
				uni.request({
					url: _self.$h.expressInterface.expressInterface.GetMidwayLineByCode.url,
					method: _self.$h.expressInterface.expressInterface.GetMidwayLineByCode.method,
					header: _self.$h.expressInterface.expressInterface.GetMidwayLineByCode.header,
					data: {
						appSystemCode: _self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode,
						startZoneName: startStation
					},
					success: (res) => {
						var schedule = JSON.parse(res.data.Data);
						if (schedule.length > 0) {
							_self.existLine = false;
							console.log(JSON.parse(res.data.Data))
							_self.recommendation = JSON.parse(res.data.Data);
						}

						uni.hideLoading();
					},
					fail(res) {
						console.log(res)
						uni.hideLoading();
					}
				})
			},
			//--------------------------------------------预定--------------------------------------------
			reserve: function(item) {
				console.log(item);
				var stationInfo = {
					type: '城际快车',
					selectDate: _self.getTodayDate().replace(/-/g, '/'),
					startStation: item.StartSiteName,
					endStation: item.EndSiteName,
					currentLatitude: _self.currentLatitude,
					currentLongitude: _self.currentLongitude,
					LineID: item.LineID,
					HotLine: item.HotLine
				}
				uni.navigateTo({
					url: '../Order/ConfirmOrder?stationInfo=' + decodeURIComponent(JSON.stringify(stationInfo))
				})
			}
		}
	}
</script>

<style  lang="scss">
.row-rotate{
	    transition-duration:0.3s;
	    transform:rotate(0deg);
	}
</style>
